import React from 'react';
import { observer } from 'mobx-react';
import Group from 'components/config/group';
import Range from 'components/config/range';
import Bull from 'components/config/zoho/bull';
import Whxy from 'components/config/zoho/whxy';
import Stroke from 'components/config/zoho/stroke';
import BaseConfig from 'modules/common/config';
import Color from 'components/config/color';
import Icon from 'components/icon';
import Level from 'components/config/zoho/level';
import * as CONST from 'common/const';
import ScrollArea from 'components/scrollArea';

import css from './index.less';

@observer
export default class ImageConfig extends BaseConfig {
  title = '矩形设置';

  // 属性
  renderAttrConfig() {
    const { mod } = this.props;

    const groupProps = {
      defaultActiveKey: [0, 1, 2],
      list: [
        {
          title: '基本设置',
          children: (
            <div>
              <Bull key="0" title="大小">
                <Whxy label="宽" left={45} onChange={val => mod.update('width', val)} inputValue={mod.width}/>
                <Whxy label="高" left={105} onChange={val => mod.update('height', val)} inputValue={mod.height}/>
              </Bull>
              <Bull key="1" title="位置">
                <Whxy label="X" left={45} onChange={val => mod.update('left', val)} inputValue={mod.left}/>
                <Whxy label="Y" left={105} onChange={val => mod.update('top', val)} inputValue={mod.top}/>
              </Bull>
            </div>
          )
        },
        {
          title: '样式设置',
          children: (
            <div>
              <div className={css.strokeWrap}>
                <Color label="填充"
                       color={mod.background}
                       onChange={color => {
                         mod.update('background', color);
                       }} />
              </div>
              <div className={css.strokeWrap}>
                <Color label="描边"
                       color={mod.borderColor}
                       onChange={color => {
                         mod.update('borderColor', color);
                       }} />
                <Stroke label="描边" mod={mod} value={mod.borderWidth}/>
              </div>
                <Range label="透明" onChange={val => mod.update('opacity', val)} min={0} max={100} step={1} value={mod.opacity}/>
                <Range label="模糊" onChange={val => mod.update('blur', val)} min={0} max={100} step={1} value={mod.blur}/>
                <Range label="圆角" onChange={val => mod.update('borderRadius', val)} min={0} max={100} step={1} value={mod.borderRadius}/>
                <Range label="旋转" onChange={val => mod.update('rotate', val)} min={-180} max={180} step={1} value={mod.rotate}/>
            </div>
          )
        },
        {
          title: '滤镜设置',
          children: (
            <div>
                <Range label="亮度" onChange={val => mod.update('brightness', val)} min={0} max={200} step={1} value={mod.brightness}/>
                <Range label="对比" onChange={val => mod.update('contrast', val)} min={0} max={200} step={1} value={mod.contrast}/>
                <Range label="饱和" onChange={val => mod.update('saturate', val)} min={0} max={100} step={1} value={mod.saturate}/>
                <Range label="灰度" onChange={val => mod.update('grayscale', val)} min={0} max={100} step={1} value={mod.grayscale}/>
                <Range label="色相" onChange={val => mod.update('hueRotate', val)} min={0} max={360} step={1} value={mod.hueRotate}/>
                <Range label="反色" onChange={val => mod.update('invert', val)} min={0} max={100} step={1} value={mod.invert}/>
            </div>
          )
        },
        {
          title: '元素层级顺序',
          children: (
            <Level mod={mod}/>
          )
        },
      ]
    };
    return (
      <ScrollArea
        style={{
          maxHeight: window.innerHeight - CONST.SIMULATOR_MARGIN_TOP - CONST.HEADER_HEIGHT - 50 - 44 - 50,
        }}
      >
        <Group {...groupProps}/>
      </ScrollArea>
    );
  }
}
